<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>canvas | yangjunbo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
    <meta name="keywords" content="MinHow,MinHow's Blog" />
  
  <meta name="description" content="canvas1.标签1&amp;lt;canvas width=&quot;600&quot; height=&quot;400&quot;&amp;gt;&amp;lt;/canvas&amp;gt; ###注意:不建议把样式写在style中;会拉伸绘制的内容;写行内样式就不会出现;是真正的扩大;行内样式是不带单位的样式;默认的宽度是300*150 ; 绘图需要JavaScript进行绘制 绘制过程123456789var canvas = document.que">
<meta property="og:type" content="article">
<meta property="og:title" content="canvas">
<meta property="og:url" content="http://yoursite.com/2017/01/05/canvas/index.html">
<meta property="og:site_name" content="yangjunbo">
<meta property="og:description" content="canvas1.标签1&amp;lt;canvas width=&quot;600&quot; height=&quot;400&quot;&amp;gt;&amp;lt;/canvas&amp;gt; ###注意:不建议把样式写在style中;会拉伸绘制的内容;写行内样式就不会出现;是真正的扩大;行内样式是不带单位的样式;默认的宽度是300*150 ; 绘图需要JavaScript进行绘制 绘制过程123456789var canvas = document.que">
<meta property="og:updated_time" content="2017-09-04T11:32:08.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="canvas">
<meta name="twitter:description" content="canvas1.标签1&amp;lt;canvas width=&quot;600&quot; height=&quot;400&quot;&amp;gt;&amp;lt;/canvas&amp;gt; ###注意:不建议把样式写在style中;会拉伸绘制的内容;写行内样式就不会出现;是真正的扩大;行内样式是不带单位的样式;默认的宽度是300*150 ; 绘图需要JavaScript进行绘制 绘制过程123456789var canvas = document.que">
  
  
    <link rel="icon" href="/favicon.ico">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/pace.min.js"></script>
  

  
  

</head>

<body>
  <div id="container">
      <header id="header">
    <div id="banner"></div>
    <div id="header-outer">
        <div id="header-row">
            <div id="logo">
                <a href="/">
                    <img src="/images/logo.png" alt="logo">
                </a>
            </div>
            <div class="header-info">
                <div id="header-title">
                    
                    <h2>
                        欢迎来到我的博客
                    </h2>
                    
                </div>
                <div id="header-description">
                    
                    <h3>
                        My name is yangjunbo
                    </h3>
                    
                </div>
            </div>
            <nav class="header-nav">
                <div class="social">
                    
                        <a title="Home"  href="http://yangjunboyjb.oschina.io/">
                            <i class="fa fa-home fa-2x"></i></a>
                    
                        <a title="Github" target="_blank" href="//github.com/wongminho">
                            <i class="fa fa-github fa-2x"></i></a>
                    
                        <a title="Weibo" target="_blank" href="http://weibo.com/5938689701/profile?topnav=1&wvr=6&is_all=1">
                            <i class="fa fa-weibo fa-2x"></i></a>
                    
                        <a   ">
                            <i class="fa fa-twitter fa-2x"></i></a>
                    
                </div>
            </nav>
        </div>
    </div>
</header>

      <div class="outer">
        <section id="main" class="body-wrap"><article id="post-canvas" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="post-title" itemprop="name">
      canvas
    </h1>
    <div class="post-title-bar">
      <ul>
          
        <li>
          <i class="fa fa-calendar"></i>  2017-01-05
        </li>
        <li>
          <i class="fa fa-eye"></i>
          <span id="busuanzi_value_page_pv"></span>
        </li>
      </ul>
    </div>
  

          
      </header>
    
    <div class="article-entry post-content" itemprop="articleBody">
      
            
            <h2 id="canvas"><a href="#canvas" class="headerlink" title="canvas"></a>canvas</h2><h3 id="1-标签"><a href="#1-标签" class="headerlink" title="1.标签"></a>1.标签</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;canvas width=<span class="string">"600"</span> height=<span class="string">"400"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span></div></pre></td></tr></table></figure>
<p>###注意:<br>不建议把样式写在style中;会拉伸绘制的内容;写行内样式就不会出现;是真正的扩大;行内样式是不带单位的样式;默认的宽度是300*150 ; 绘图需要JavaScript进行绘制</p>
<h4 id="绘制过程"><a href="#绘制过程" class="headerlink" title="绘制过程"></a>绘制过程</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> canvas = <span class="built_in">document</span>.querySelector(<span class="string">'canvas'</span>);</div><div class="line"><span class="comment">//2.获取绘图工具----工具箱</span></div><div class="line"><span class="keyword">var</span> ctx = canvas.getContext(<span class="string">'2d'</span>)<span class="comment">//仅仅支持2d</span></div><div class="line"><span class="comment">//3.设置其实绘制的位置</span></div><div class="line">ctx.moveTo(<span class="number">100</span>,<span class="number">100</span>);</div><div class="line"><span class="comment">//4.画一条直线</span></div><div class="line">ctx.lineTo(<span class="number">100</span>,<span class="number">200</span>)</div><div class="line"><span class="comment">//5.进行绘制  描边  填充 </span></div><div class="line">ctx.stroke();</div></pre></td></tr></table></figure>
<h4 id="1-1-lineWidth"><a href="#1-1-lineWidth" class="headerlink" title="1.1. lineWidth"></a>1.1. lineWidth</h4><p> 设置线的宽度;默认宽度为1px;设置宽度;奇数会模糊;偶数不会;</p>
<h4 id="1-2-strokeStyle"><a href="#1-2-strokeStyle" class="headerlink" title="1.2. strokeStyle"></a>1.2. strokeStyle</h4><p> 设置线的颜色;必须有双引号</p>
<h4 id="1-3-beginPath"><a href="#1-3-beginPath" class="headerlink" title="1.3. beginPath"></a>1.3. beginPath</h4><p>开启新路径;防止样式继承;不开启后边的样式会把前边的样式覆盖掉</p>
<h4 id="1-4-closePath"><a href="#1-4-closePath" class="headerlink" title="1.4 closePath"></a>1.4 closePath</h4><p> 自动闭合;姜维完成的地方自动闭合</p>
<h4 id="1-5-fillStyle"><a href="#1-5-fillStyle" class="headerlink" title="1.5 fillStyle"></a>1.5 fillStyle</h4><p>填充颜色,颜色必须有双引号;</p>
<h4 id="1-6-fill"><a href="#1-6-fill" class="headerlink" title="1.6 fill();"></a>1.6 fill();</h4><p>填充;填充规则;<em>*</em>非零规则;由内往外画一条线;逆时针为正1;顺时针为负1;相加如果超过1;则全部填充;如果小于等于0就不会影响内部的元素</p>
<h4 id="1-7-lineCap"><a href="#1-7-lineCap" class="headerlink" title="1.7 lineCap"></a>1.7 lineCap</h4><p>线两端的样式;值 : 默认 butt 没有样式; round 两端变圆; square 两端变方; 变圆和变宽都会加宽先长度</p>
<h4 id="1-8-ctx-stroke-绘制-描边-填充-对线路显示-默认是黑色"><a href="#1-8-ctx-stroke-绘制-描边-填充-对线路显示-默认是黑色" class="headerlink" title="1.8 ctx.stroke  绘制.描边.填充.对线路显示;默认是黑色;"></a>1.8 ctx.stroke  绘制.描边.填充.对线路显示;默认是黑色;</h4><h3 id="1-9-fillText"><a href="#1-9-fillText" class="headerlink" title="1.9 fillText"></a>1.9 fillText</h3><p>1.参数一 表示要书写的文字;<br>2.参数二 文字在画板中的x位置<br>3.参数三 文字在画板中y位置</p>
<h3 id="2-画一个三角形"><a href="#2-画一个三角形" class="headerlink" title="2.画一个三角形"></a>2.画一个三角形</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> canvas = <span class="built_in">document</span>.querySelector(<span class="string">'canvas'</span>);</div><div class="line">   <span class="keyword">var</span> ctx = canvas.getContext(<span class="string">'2d'</span>);</div><div class="line">   <span class="comment">/*绘制三角形*/</span></div><div class="line">   ctx.moveTo(<span class="number">100</span>,<span class="number">100</span>);</div><div class="line">   ctx.lineTo(<span class="number">200</span>,<span class="number">100</span>);</div><div class="line">   ctx.lineTo(<span class="number">200</span>,<span class="number">200</span>);</div><div class="line">   <span class="comment">//ctx.lineTo(100,100);</span></div><div class="line">   ctx.closePath();</div><div class="line">   ctx.stroke();</div><div class="line"></div><div class="line">   <span class="comment">//ctx.fillStyle = 'red';</span></div><div class="line">   <span class="comment">//ctx.fill();</span></div></pre></td></tr></table></figure>
<h3 id="线拐角的样式-lineJoin"><a href="#线拐角的样式-lineJoin" class="headerlink" title="线拐角的样式  lineJoin"></a>线拐角的样式  lineJoin</h3><h4 id="miter-默认的样式"><a href="#miter-默认的样式" class="headerlink" title="miter 默认的样式"></a>miter 默认的样式</h4><h4 id="round-线拐角带圆弧"><a href="#round-线拐角带圆弧" class="headerlink" title="round  线拐角带圆弧"></a>round  线拐角带圆弧</h4><h4 id="bevel-拐角切脚"><a href="#bevel-拐角切脚" class="headerlink" title="bevel  拐角切脚"></a>bevel  拐角切脚</h4><h3 id="设置虚线"><a href="#设置虚线" class="headerlink" title="设置虚线"></a>设置虚线</h3><p> setLineDash([数组中间可以传多个参数;参数不同;显示的样式也就不同])</p>
<h3 id="fillRect-矩形"><a href="#fillRect-矩形" class="headerlink" title="fillRect() 矩形"></a>fillRect() 矩形</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//1.第一个参数是x轴的坐标</span></div><div class="line"><span class="comment">//2.第二个参数表示y轴的坐标</span></div><div class="line"><span class="comment">//3.第三个参数表示要绘制矩形的宽度</span></div><div class="line"><span class="comment">//4.第四个参数表示要绘制矩形的高度</span></div><div class="line"><span class="comment">//描边矩形的绘制方式</span></div><div class="line">ct6填充矩形的绘制方法</div><div class="line">ctx.fillRect(<span class="number">100</span>,<span class="number">100</span>,<span class="number">200</span>,<span class="number">100</span>)</div><div class="line"><span class="comment">/*清除矩形绘制内容*/</span></div><div class="line">ctx.clearRect(<span class="number">100</span>,<span class="number">100</span>,<span class="number">50</span>,<span class="number">50</span>);</div></pre></td></tr></table></figure>
<h3 id="曲线"><a href="#曲线" class="headerlink" title="曲线"></a>曲线</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> canvas = <span class="built_in">document</span>.querySelector(<span class="string">'canvas'</span>);</div><div class="line">    <span class="keyword">var</span> ctx = canvas.getContext(<span class="string">'2d'</span>);</div><div class="line">    <span class="keyword">var</span> oldx = <span class="number">0</span>;</div><div class="line">    <span class="keyword">var</span> oldy = <span class="number">0</span>;</div><div class="line">    <span class="comment">//循环设置曲线的样式</span></div><div class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i &lt; <span class="number">600</span>;i++)&#123;</div><div class="line">        <span class="comment">//记录每次点增加的x位置</span></div><div class="line">        <span class="keyword">var</span> x= i;</div><div class="line">        <span class="comment">//计算每次改变y的位置</span></div><div class="line">        <span class="keyword">var</span> y = <span class="number">100</span>*<span class="built_in">Math</span>.cos(x/<span class="number">50</span>)<span class="number">-200</span>;</div><div class="line">        <span class="comment">//每次都开辟新的路径</span></div><div class="line">        ctx.beginPath();</div><div class="line">        ctx.moveTo(oldx,oldy);</div><div class="line">        ctx.lineTo(x,y);</div><div class="line">        ctx.stroke();</div><div class="line">        oldx= x;</div><div class="line">        oldy= y;</div><div class="line">    &#125;</div></pre></td></tr></table></figure>
<h3 id="绘制扇形"><a href="#绘制扇形" class="headerlink" title="绘制扇形"></a>绘制扇形</h3><h3 id="arc"><a href="#arc" class="headerlink" title="arc()"></a>arc()</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">弧度:</div><div class="line"><span class="number">1.</span>半径</div><div class="line"><span class="number">2.</span>完整的圆<span class="number">360</span>度</div><div class="line"><span class="number">3.</span>完整的圆周长</div><div class="line"><span class="number">4.</span>完整的圆弧度</div><div class="line"><span class="number">5.</span>一个角度等于多少弧度:π/<span class="number">180</span>个弧度</div></pre></td></tr></table></figure>
<pre><code>1.圆心x轴坐标
2.圆心y轴的坐标
3.圆的半径
4.起始弧度
5.结束弧度
6.绘制的方向(默认顺时针 false  逆时针true)
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> canvas = <span class="built_in">document</span>.querySelector(<span class="string">'canvas'</span>);</div><div class="line"><span class="keyword">var</span> ctx = canvas.getContext(<span class="string">'2d'</span>);</div><div class="line"><span class="keyword">var</span> x0 = ctx.canvas.width/<span class="number">2</span>;</div><div class="line"><span class="keyword">var</span> y0 =ctx.canvas.height/<span class="number">2</span>;</div><div class="line"><span class="comment">/*</span></div><div class="line"><span class="comment">* 圆心x轴坐标</span></div><div class="line"><span class="comment">* 圆心y轴的坐标</span></div><div class="line"><span class="comment">* 圆的半径</span></div><div class="line"><span class="comment">* 起始弧度</span></div><div class="line"><span class="comment">* 结束弧度</span></div><div class="line"><span class="comment">* 绘制的方向(默认顺时针 false  逆时针true)</span></div><div class="line"><span class="comment">* */</span></div><div class="line">ctx.moveTo(x0,y0);</div><div class="line">ctx.arc(x0,y0,<span class="number">150</span>,<span class="number">0</span>,<span class="built_in">Math</span>.PI/<span class="number">3</span>);</div><div class="line">ctx.closePath();</div><div class="line">ctx.stroke();</div><div class="line">ctx.fill();</div></pre></td></tr></table></figure>
<h3 id="绘制图片-drawImage"><a href="#绘制图片-drawImage" class="headerlink" title="绘制图片 drawImage()"></a>绘制图片 drawImage()</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//第一种写法</span></div><div class="line">   <span class="comment">//drawImage 方法</span></div><div class="line">   <span class="comment">//图片对象</span></div><div class="line">   <span class="comment">//参数2.绘制在canvas中的x坐标</span></div><div class="line">   <span class="comment">//参数3.绘制在canvas中的y坐标</span></div><div class="line">   ctx.drawImage(image,<span class="number">0</span>,<span class="number">0</span>)</div><div class="line"></div><div class="line"></div><div class="line">   <span class="comment">//第二种写法</span></div><div class="line">   <span class="comment">//图片对象</span></div><div class="line">   <span class="comment">//绘制在canvas当中的x坐标</span></div><div class="line">   <span class="comment">//绘制在canvas中的y坐标</span></div><div class="line">   <span class="comment">//绘制的大小 宽度</span></div><div class="line">   <span class="comment">//绘制的大小  长度</span></div><div class="line">   ctx.drawImage(image,<span class="number">100</span>,<span class="number">100</span>,<span class="number">400</span>,<span class="number">400</span>)</div><div class="line"></div><div class="line">   <span class="comment">//第三种写法</span></div><div class="line">   <span class="comment">//图片对象</span></div><div class="line">   <span class="comment">//图片上的定位  X轴的定位</span></div><div class="line">   <span class="comment">//图片上的定位  Y轴的定位</span></div><div class="line">   <span class="comment">//截取图片的尺寸  宽度</span></div><div class="line">   <span class="comment">//截取图片的尺寸   高度</span></div><div class="line">   <span class="comment">//绘制在canvas当中的x坐标</span></div><div class="line">   <span class="comment">//绘制在canvas当中的y坐标</span></div><div class="line">   <span class="comment">//绘制的大小  宽度</span></div><div class="line">   <span class="comment">//绘制的大小  高度</span></div><div class="line">   ctx.drawImage(image,<span class="number">400</span>,<span class="number">400</span>,<span class="number">100</span>,<span class="number">100</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">100</span>,<span class="number">100</span>);</div></pre></td></tr></table></figure>
<h3 id="translate-位移-移动整个坐标系"><a href="#translate-位移-移动整个坐标系" class="headerlink" title="translate() 位移 移动整个坐标系"></a>translate() 位移 移动整个坐标系</h3><p> 1.第一个参数代表x方向偏移<br> 2.第二个代表y方向的位移</p>
<h3 id="save-restore-保存与恢复"><a href="#save-restore-保存与恢复" class="headerlink" title="save()||restore() 保存与恢复"></a>save()||restore() 保存与恢复</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> canvas = <span class="built_in">document</span>.querySelector(<span class="string">'canvas'</span>);</div><div class="line">    <span class="keyword">var</span> ctx = canvas.getContext(<span class="string">'2d'</span>);</div><div class="line"></div><div class="line">    ctx.moveTo(<span class="number">100</span>,<span class="number">100</span>);</div><div class="line">    ctx.lineTo(<span class="number">300</span>,<span class="number">100</span>);</div><div class="line">    ctx.lineWidth = <span class="number">10</span>;</div><div class="line">    ctx.strokeStyle = <span class="string">'red'</span>;</div><div class="line">    ctx.stroke();</div><div class="line">    <span class="comment">/*保存  上面的样式和变形*/</span></div><div class="line">    <span class="comment">/*多次保存多个系列样式*/</span></div><div class="line">    <span class="comment">/*存储结构是 栈 后进先出*/</span></div><div class="line">    ctx.save();</div><div class="line"></div><div class="line">    ctx.beginPath();</div><div class="line">    ctx.moveTo(<span class="number">100</span>,<span class="number">200</span>);</div><div class="line">    ctx.lineTo(<span class="number">300</span>,<span class="number">200</span>);</div><div class="line">    ctx.lineWidth = <span class="number">20</span>;</div><div class="line">    ctx.strokeStyle = <span class="string">'green'</span>;</div><div class="line">    ctx.stroke();</div><div class="line">    ctx.save();</div><div class="line"></div><div class="line"></div><div class="line">    <span class="comment">/*绘制和第一条一样的线*/</span></div><div class="line">    ctx.beginPath();</div><div class="line">    ctx.moveTo(<span class="number">100</span>,<span class="number">300</span>);</div><div class="line">    ctx.lineTo(<span class="number">300</span>,<span class="number">300</span>);</div><div class="line">    <span class="comment">/*恢复 取之前保存的样式或变形*/</span></div><div class="line">    ctx.restore();</div><div class="line">    ctx.stroke();</div><div class="line"></div><div class="line">    ctx.beginPath();</div><div class="line">    ctx.moveTo(<span class="number">100</span>,<span class="number">400</span>);</div><div class="line">    ctx.lineTo(<span class="number">300</span>,<span class="number">400</span>);</div><div class="line">    <span class="comment">/*恢复 取之前保存的样式或变形*/</span></div><div class="line">    ctx.restore();</div><div class="line">    ctx.stroke();</div></pre></td></tr></table></figure>
<h3 id="定时函数-requestAnimationFrame"><a href="#定时函数-requestAnimationFrame" class="headerlink" title="定时函数 requestAnimationFrame()"></a>定时函数 requestAnimationFrame()</h3><p>1.浏览器在绘制页面的过程中是有自己的频率<br>2.fps 一般浏览器的帧 1s 60次绘制/频率<br>3.当进行绘制的时候   通知函数可以执行了<br>4.提供动画的流畅性</p>
<h3 id="关于运动的公式"><a href="#关于运动的公式" class="headerlink" title="关于运动的公式"></a>关于运动的公式</h3><h4 id="1-匀速运动"><a href="#1-匀速运动" class="headerlink" title="1.匀速运动"></a>1.匀速运动</h4><p>路程 = 速度 <em> 时间   s = v </em> t;</p>
<h4 id="2-匀加速运动"><a href="#2-匀加速运动" class="headerlink" title="2.匀加速运动"></a>2.匀加速运动</h4><p>平均速度: 路程 = (出事速度+末速度)<br>末速度 : 初速度+加速度<em>时间<br>平均速度 : 平均速度 </em> 时间   = (v0+v0+acc<em>t)/2 </em> t = (v0 + acc<em>t/2)</em>t = v0 <em>t + acc</em>t*t/2</p>
<h4 id="3-自由落体运动"><a href="#3-自由落体运动" class="headerlink" title="3.自由落体运动"></a>3.自由落体运动</h4><p>重力加速度 = 9.8;<br> h = g<em>t</em>t/2</p>

            <div class="post-copyright">
    <div class="content">
        <p>最后更新： 2017年09月04日 19:32</p>
        <p>原始链接： <a class="post-url" href="/2017/01/05/canvas/" title="canvas">http://yoursite.com/2017/01/05/canvas/</a></p>
        <footer>
            <a href="http://yoursite.com">
                <img src="/images/logo.png" alt="yangjunbo">
                yangjunbo
            </a>
        </footer>
    </div>
</div>

      
    </div>
    <footer class="article-footer">
        <ul class="article-footer-menu">
            
            
        </ul>
        
    </footer>
  </div>
</article>


    <aside class="post-toc-pos">
        <nav class="post-toc-wrap">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#canvas"><span class="post-toc-text">canvas</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#1-标签"><span class="post-toc-text">1.标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#绘制过程"><span class="post-toc-text">绘制过程</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-1-lineWidth"><span class="post-toc-text">1.1. lineWidth</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-2-strokeStyle"><span class="post-toc-text">1.2. strokeStyle</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-3-beginPath"><span class="post-toc-text">1.3. beginPath</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-4-closePath"><span class="post-toc-text">1.4 closePath</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-5-fillStyle"><span class="post-toc-text">1.5 fillStyle</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-6-fill"><span class="post-toc-text">1.6 fill();</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-7-lineCap"><span class="post-toc-text">1.7 lineCap</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-8-ctx-stroke-绘制-描边-填充-对线路显示-默认是黑色"><span class="post-toc-text">1.8 ctx.stroke  绘制.描边.填充.对线路显示;默认是黑色;</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#1-9-fillText"><span class="post-toc-text">1.9 fillText</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#2-画一个三角形"><span class="post-toc-text">2.画一个三角形</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#线拐角的样式-lineJoin"><span class="post-toc-text">线拐角的样式  lineJoin</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#miter-默认的样式"><span class="post-toc-text">miter 默认的样式</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#round-线拐角带圆弧"><span class="post-toc-text">round  线拐角带圆弧</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#bevel-拐角切脚"><span class="post-toc-text">bevel  拐角切脚</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#设置虚线"><span class="post-toc-text">设置虚线</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#fillRect-矩形"><span class="post-toc-text">fillRect() 矩形</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#曲线"><span class="post-toc-text">曲线</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#绘制扇形"><span class="post-toc-text">绘制扇形</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#arc"><span class="post-toc-text">arc()</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#绘制图片-drawImage"><span class="post-toc-text">绘制图片 drawImage()</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#translate-位移-移动整个坐标系"><span class="post-toc-text">translate() 位移 移动整个坐标系</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#save-restore-保存与恢复"><span class="post-toc-text">save()||restore() 保存与恢复</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#定时函数-requestAnimationFrame"><span class="post-toc-text">定时函数 requestAnimationFrame()</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#关于运动的公式"><span class="post-toc-text">关于运动的公式</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-匀速运动"><span class="post-toc-text">1.匀速运动</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#2-匀加速运动"><span class="post-toc-text">2.匀加速运动</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3-自由落体运动"><span class="post-toc-text">3.自由落体运动</span></a></li></ol></li></ol></li></ol>
        </nav>
    </aside>
    

<nav id="article-nav">
  
  
    <a href="/2016/06/05/ajax/" id="article-nav-older" class="article-nav-link-wrap">
      <span class="article-nav-title">Ajax(detailed information)</span>
      <i class="fa fa-hand-o-right" aria-hidden="true"></i>
    </a>
  
</nav>



    
</section>
        
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


      <p>
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        Theme <a href="//github.com/wongminho/hexo-theme-miho" target="_blank">MiHo</a>
      &copy; 2017 yangjunbo<br>
      </p>
    </div>
  </div>
</footer>
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var mihoConfig = {
      root: "http://yoursite.com",
      animate: true,
      isHome: false
  }
</script>
<div class="sidebar">
    <div id="sidebar-search">
        <i class="fa fa-search"></i>
    </div>
    <div class="sidebar-menu">
        <i class="fa fa-bars"></i>
    </div>
    <div id="sidebar-top">
        <span class="sidebar-top-icon"><i class="fa fa-angle-up"></i></span>
    </div>
</div>
<div class="sidebar-menu-box">
    <div class="sidebar-menu-box-container">
        <div id="sidebar-menu-box-tags">
            
        </div>
    </div>
    <a href="javascript:;" class="sidebar-menu-box-close">&times;</a>
</div>
<div class="search-wrap">
    <span class="search-close">&times;</span>
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
            <i class="icon icon-lg icon-chevron-left"></i>
        </a>
        <input class="search-field" placeholder="Search..." id="keywords">
        <a id="search-submit" href="javascript:;">
            <i class="fa fa-search"></i>
        </a>
</div>

<div class="search-container" id="search-container">
    <ul class="search-result" id="search-result">
    </ul>
</div>
<div id="search-tpl">
    <li class="search-result-item">
        <a href="{url}" class="search-item-li">
            <span class="search-item-li-title" title="{title}">{title}</span>
        </a>
    </li>
</div>
<script src="/js/search.js"></script>
<script src="/js/sidebar-menu-box.js"></script>


  <script src="//cdn.bootcss.com/particles.js/2.0.0/particles.min.js"></script>
  <div id="particles"></div>
  <script src="/js/particles.js"></script>







  <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">
  <script src="//cdn.bootcss.com/scrollReveal.js/3.0.5/scrollreveal.js"></script>
  <script src="/js/animate.js"></script>

  </div>
</body>
</html>